import React, { useEffect } from 'react'
import { Form, Select, Input, Row, Col, DatePicker, message } from "antd";
import stafDetailData from '@/staticLists/stafDetailData';
import { useDispatch } from "umi"
import zhCn from "antd/es/locale/zh_CN"
import UploadComp from '@/components/UploadComponent/UploadComp';
import { mapData } from '@/utils/mapData';
import DrowPover from "@/components/DropPopover";
import moment from 'moment';
import $http from "@/services";
import { staffRule } from '@/utils/rules/staffRule';
import { createOption } from '@/utils/selectOption';
import "./index.less"

export default function StaffDetail({ staffDetail, _initStaffList }) {
    const [form] = Form.useForm();
    const dispatch = useDispatch();
    // 初始化重置,因为其Form表单中不会监听数据，数据发生变化时不知请，需要进行重置
    useEffect(() => {
        form.resetFields();
    }, [staffDetail])

    //提交新的value
    const onSubmitNewValue = async (item) => {
        let oldValue = staffDetail[item.itemName];
        // 看是否为其搜索中传过来的若为则会传递id值过来
        const newValue = item._id ? item._id : form.getFieldValue(item.itemName);
        // 若传为object则进行提取
        if (typeof oldValue === "object" && oldValue) {
            oldValue = oldValue?._id;
        }

        // 若为这两种属性，要进行判断，其新的值在数据库中是否存在
        if (item.itemName === "mobile" || item.itemName === "accountName") {
            const { data, msg } = await $http.checkIsExist({
                checkData: {
                    [item.itemName]: newValue
                }
            });
            // 若修改失败则进行提示
            if (data) {
                message.error(msg);
                return form.setFieldValue(item.itemName, oldValue);
            }
        }
        // 更新
        updateStaffDetail(item.itemName, newValue)

    }

    // 更新数据
    async function updateStaffDetail(type, updateVal) {
        const { data, msg } = await $http.updateStaff({
            _id: staffDetail._id,
            type,
            updateVal
        })
        if (data) return;
        message.success(msg);
        dispatch({
            type: "staff/getDetailStaff",
            payload: staffDetail._id
        })
        _initStaffList();
    }

    // 获取新的Value值
    function getNewValue(newItem) {
        onSubmitNewValue(newItem);
    }

    // 获取新的图片地址
    function getNewAvatar(avatar) {
        updateStaffDetail("avatar", avatar);
    }

    // 创建节点
    const createDetailNode = {
        input(item) {
            return (<Input
                placeholder={item.itemName === "password" ? '请在登录界面完成修改' : item.initVal}
                disabled={item.itemName === "password"}
                key={item._id}
                onBlur={() => onSubmitNewValue(item)}></Input>)
        },
        date(item) {
            return <DatePicker style={{ width: "100%" }} locale={zhCn} placeholder={item.initVal} onChange={() => onSubmitNewValue(item)}></DatePicker>
        },
        select(item) {
            const arr = mapData[item.itemName];
            return <Select options={createOption(arr)} onChange={() => onSubmitNewValue(item)}></Select>
        },
        popover(item) {

            return <Input
                readOnly
                placeholder={item.initVal}
                addonAfter={<DrowPover
                    placeValue={item.initVal}
                    searchType={item.itemName}
                    getnewValue={getNewValue}
                    interfaced={item.interfaced}></DrowPover>} onChange={() => onSubmitNewValue(item)}></Input>
        },
        upload(item) {
            return (<UploadComp avatar={staffDetail.avatar} getNewAvatar={getNewAvatar}></UploadComp>)

        }
    }
    return (
        <Form
            layout='vertical'
            form={form}
            initialValues={{
                ...staffDetail,
                onboardingTime: moment(staffDetail.onboardingTime),
                departmentName: staffDetail.department?.departmentName,
                levelName: staffDetail.level?.levelName,
            }}
        >
            {stafDetailData.map((el, index) => {
                return (<Row justify={"space-between"} key={index}>
                    {el.map((item, childIndex) => {
                        return (<Col span={11} key={childIndex} style={{ ...item.style }}>
                            <Form.Item
                                label={item.labelTxt}
                                name={item.itemName}
                                rules={staffRule[item.itemName]}
                            >
                                {createDetailNode[item.renderType](item)}
                            </Form.Item>
                        </Col>)
                    })}
                </Row>)
            })}
        </Form>



    )
}
